<script lang="ts" setup>
  import { DownOutlined } from '@ant-design/icons-vue';
  import Menu from '@sscd/menu';
  import Dropdown from '@sscd/dropdown';
</script>

<template>
  <div class="demo">
    <div class="demo-title">多级菜单</div>
    <div class="demo-content">
      <Dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          Cascading menu
          <DownOutlined />
        </a>
        <template #overlay>
          <Menu>
            <Menu.Item>1st menu item</Menu.Item>
            <Menu.Item>2nd menu item</Menu.Item>
            <Menu.SubMenu key="sub1" title="sub menu">
              <Menu.Item>3rd menu item</Menu.Item>
              <Menu.Item>4th menu item</Menu.Item>
            </Menu.SubMenu>
            <Menu.SubMenu key="sub2" title="disabled sub menu" disabled>
              <Menu.Item>5d menu item</Menu.Item>
              <Menu.Item>6th menu item</Menu.Item>
            </Menu.SubMenu>
          </Menu>
        </template>
      </Dropdown>
    </div>
  </div>
</template>
